<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" :end="page.finished" :noFixed="true" bodyBg="none"
        :showOverTxt="page.lists.length>0" :pageIndex="page.pageIndex">
        <template v-slot:header>
            <div class="adheader">
                <div class="hcon">
                    <div class="shopLetfTop">
                        <b>{{total}}</b> {{totalText}}
                    </div>
                    <div class="topSearch">
                        <div class="tswd">
                            <my-search :placeholder="search" v-model="keyword" @onSearch="getSearchData"/>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <ul class="shopList wrapfix">
            <li v-for="dt in page.lists" :key="dt.shopId">
                <router-link :to="`/shop/${dt.shopId}`">
                    <div class="topbox">
                        <div class="imgbox">
                            <cut-image :url="dt.headImageUrl"/>
                        </div>
                        <div class="toptxt">
                            <h5>{{dt.shopName}}</h5>
                            <div class="star">
                                <span v-t="'shop.text14'">Official Asuth</span>
                                <div class="xx">
                                    <van-rate v-model="dt.indexStar" :readonly="true" allow-half size='10px' color="#CFFFFF"/>
                                </div>
                            </div>
                            <div class="intro">{{dt.introduction}}</div>
                        </div>
                    </div>
                    <div class="bottomGoods" v-if="dt.goodsDtos.length>0">
                        <template v-for="(dt2,index) in dt.goodsDtos" :key="dt2.goodsId">
                            <div class="item" v-if="index<3">
                                <Image :url="dt2.headImageUrl"/>
                            </div>
                        </template>
                        <template v-if="dt.goodsDtos.length<3">
                            <div class="item" v-for="f in 3-dt.goodsDtos.length" :key="`zw${f}`">
                                
                            </div>
                        </template>
                    </div>
                    <div class="bottomGoods notgoodsdata" v-else v-t="'shop.text15'">
                        No Commodity Data
                    </div>
                </router-link>
            </li>
        </ul>
        <emptyGame v-if="page.finished && page.lists.length<1"/>
        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import {Rate as vanRate} from 'vant'
import {useRoute,useRouter} from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import oneTab from '@/components/oneTab.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import myTab from '@/components/myTab.vue';
import goodsList from '@/components/goodsList.vue';
import cutImage from '@/components/cutImage.vue'
import emptyGame from '@/components/emptyGame.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        oneTab,
        mySearch,
        Image,
        myTab,
        goodsList,
        cutImage,
        emptyGame,
        vanRate
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()
        const state = reactive({
            keyword:'',
            page:{
                lists:[],
                pageIndex:1,
                pageSize:18,
                finished: false
            },
            total:0,
            arLandmarkId:'',
            totalText:t('public.total'),
            search:t('public.search'),
        })

        onMounted(()=>{
            state.arLandmarkId = route.query.cityid
           onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("shop/get_shop_list", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        keyWord:state.keyword,
                        arLandmarkId:state.arLandmarkId,
                        orderField: '',
                        orderType: ''
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    state.total = res.total
                    resolve(true);
                }, 500);
            });
        }
        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getSearchData = async(keyword)=>{
            resetScroll()
        }     

        return {
            ...toRefs(state),
            onLoad,
            getSearchData
        }
    }
}
</script>

<style lang="scss" scoped>
    .adheader{
         padding: 15px 30px 15px 0;
        .hcon{
            display: flex;
            height: 80px;
            line-height: 80px;
            align-items: center;
            .shopLetfTop{
                padding: 0;
                font-size: 28px;
                font-weight: 500;
                font-family: Inter-Medium, Inter;
                b{
                    color: #82FEF4;
                }
            }
            .topSearch{
                flex: 1;
                .tswd{
                    float:right;
                    width: 550px;
                }
            }
        }
    }
    .shopList{
        padding: 20px 0 30px 0;
        margin: 0;
        list-style: none;
        li{
            float: left;
            width: 33.333%;
            height: 400px;
            padding: 0 20px 30px 0;
            overflow: hidden;
            a{
                display: block;
                width: 100%;
                height: 100%;
                background: url(/images/shop/sp1.png) left top no-repeat;
                background-size:100% 100%;
                padding: 30px 30px;
                .topbox{
                    display: flex;
                    height: 130px;
                    .imgbox{
                        width: 130px;
                        height: 100%;
                        flex-shrink: 0;
                    }
                }
                .toptxt{
                    flex: 1;
                    padding: 0 0 0 15px;
                    width: 0;
                    h5{
                        font-size: 22px;
                        padding: 0;
                        margin: 0;
                        font-family: Poppins-SemiBold, Poppins;
                        font-weight: 600;
                        color: #DFFCFF;
                        line-height: normal;
                        text-shadow: 0px 0px 6px #07A3FB;
                        //-webkit-background-clip: text;
                        //-webkit-text-fill-color: transparent;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .star{
                        display: flex;
                        margin: 0;
                        height:40px ;
                        overflow: hidden;
                        span{
                            float: left;
                            font-size: 18px;
                            font-family: Inter-Medium, Inter;
                            font-weight: 500;
                            background: rgba(12,132,217,0.3000);
                            height: 40px;
                            line-height:40px;
                            overflow: hidden;
                            border-radius:20px ;
                            padding: 0 15px;
                            transform: scale(.8);
                            -webkit-transform: scale(.8);
                            transform-origin: 0 0;
                            flex-shrink: 0;
                        }
                        .xx{
                            float: left;
                            margin: -5px 0 0 0;
                        }
                        
                    }
                    .intro{
                        font-size: 22px;
                        height: 60px;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        line-height: 30px;
                        margin: 5px 0 0 0;
                    }
                }
                .bottomGoods{
                    display: flex;
                    height: 150px;
                    background: url(/images/capital/zcbg.png) left top no-repeat;
                    background-size: 100% 100%;
                    margin: 20px 0 0 0;
                    padding: 14px;
                    font-size: 22px;
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                    &.notgoodsdata{
                        align-items: center;
                        justify-content: center;
                    }
                    .item{
                        flex: 1;
                        &+.item{
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width:800px) {
        .shopList {
            li{
                width: 50%;
            }
        }
    }

</style>
<style lang="scss">
    .xx .van-rate__item:not(:last-child){
        padding-right: 5px;
    }
</style>